RSC、server action、on-demand revalidationでPHPのような世界をNext.jsにもたらす
参考
これ読んでmiyamonz.iconは理解した
一言で言うと、React Server Componentsは多段階計算です。
miyamonz.icon視点の解説
server action
一応Reactの機能らしいが、それをかなり先行してNext.jsが実現してくれてるっぽい
ので、現状はNext.jsのやつと思っておけば良い
クライアントコンポーネント上から、サーバ上の関数をimportして叩くというもの
役割としてはtrpcに近いが、コード上の書き味がかなり楽になる
https://gyazo.com/5944d4f15ca026b3da34ce0337c4c80f
原理を調べてないが、サーバとクライアントの境界をまたぐようなimportを自動で認識して、RPCに変換してる
魔術すぎるmiyamonz.icon
批判
svelteの作者による現状のwebとかの意見のなかに、これに関する批判がある
Remixがサーバとクライアントの境界が曖昧になっていて、混乱の元であるとか
この気持ちもわかるんだけど、client, server が密になっていくのは避けられない流れだと思うmiyamonz.icon
参考
明示的にrevalidateできる
Next.jsはfetchとかを良い感じにキャッシュする機能を入れてる
fetch上のtag単位、app routerのpage単位とかでrevalidateをかけられる
この辺に関してはreact-queryでもできるmrsekut.icon
しかも、RSCのレンダリングをrevalidateかけて、その差分のみをクライアントに送ることで、フルリロードせずにrevalidateできる！！！
RSCの再レンダリングを発火できるところがすごい
better ISRって感じ
zennの記事の引用
https://gyazo.com/f953a78c2a3f3b8714eb4ac7d2b43291
Layoutの部分のみをrevalidateしてる
以上３つの概念を混ぜると、以下が実現できる
RSC上でサーバ上でデータを取得
prismaとかで
そのデータを修正するには
server actionを叩く
prismaでupdate
その後にrevalidate
revalidateされたのでRSCが再レンダリングされてクライアントに送信される
クライアント上では、ただちに結果が反映される
この過程にtrpcやreact-queryがなくなっていて、フルリロード抜きでサーバ上の永続化層と会話ができる
RSCは既に動くのは確認済みだけど、
server actionとrevalidationはまだ試せてないから確認は要るがmiyamonz.icon